<template>
  <div class="hello">
      <div class="input">
        <h1>ToDoList</h1>
          <input type="text" v-model="msg" @keydown.enter="send()" placeholder="添加Todo" :title="msg.length>0?'':title">
      </div>
      <div class="content">
       
        <UnFinish></UnFinish>
         <Finish></Finish>
      </div>
      <p class="footer">Copyright © 2014 todolist.cn clear</p>
  </div>
</template>

<script>
import Finish from '@/components/Finish'
import UnFinish from '@/components/UnFinish'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '',
      title:"请填写此字段"
    }
  },
  components:{Finish,UnFinish},
  methods:{
    send(){
      var obj ={
        msg:this.msg,
        isFinish:false
      }
      this.$store.commit("add",obj);
      this.msg="";
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  height: 50px;
  width: 100%;
  background: rgba(47,47,47,0.98);
}
.input{
  width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.input input{
  height: 26px;
  width: 360px;
  margin-top: 8px;
  border-radius: 5px;
  outline: none;
  padding-left: 10px;
}
.input h1{
  color: white;
  line-height: 50px;
  font-size: 24px;
}
.footer{
  text-align: center;
}
.content{
  width: 600px;
  margin: 0 auto;
  padding-top:20px;
}
</style>
